﻿ $(window).load(function () {
 	$(".loading").fadeOut()
 })
 $(function () {
 	echarts_1();
 	echarts_2();
 	echarts_3();



 	function echarts_1() {
 		// 基于准备好的dom，初始化echarts实例
 		var myChart = echarts.init(document.getElementById('echart1'));
		var vdata=[];
		$.ajax({
			url:"/market/market_echarts_1",
			type:"get",
			dataType:"json",
			async:false,
			success:function f(data) {
				console.log(data)
				vdata = data
			},
			error:function (errormsg) {
				alert(data)
			}
		})
 		option = {
 			tooltip: {
 				trigger: 'item',
 				formatter: "{a} <br/>{b} : {c} ({d}%)"
 			},
			legend: {
				orient: 'vertical',
				type: 'scroll',
				right: 0,
				bottom:5,
				itemWidth: 10,
				itemHeight: 10,
				textStyle: {
					color: 'rgba(255,255,255,.5)',
					fontSize:'12',
				}
			},
 			series: [{
 				name: '占比情况',
 				type: 'pie',
 				radius: '50%',
				label: {show:false},
				labelLine: {show:false},
 				center: ['30%', '30%'],
 				clockwise: false,
 				data:vdata,
 				itemStyle: {
 					normal: {
 						//borderWidth: 1,
 						//borderColor: '#ffffff',
 					},
 					emphasis: {
 						borderWidth: 0,
 						shadowBlur: 10,
 						shadowOffsetX: 0,
 						shadowColor: 'rgba(0, 0, 0, 0.5)'
 					}
 				}
 			}],

 			//backgroundColor: '#fff'
 		};

 		// 使用刚指定的配置项和数据显示图表。
 		myChart.setOption(option);
 		window.addEventListener("resize", function () {
 			myChart.resize();
 		});
 	}

 	function echarts_2() {
 		// 基于准备好的dom，初始化echarts实例
 		var myChart = echarts.init(document.getElementById('echart2'));
 		var vdata = [];
 		var xdata = [];
 		var ydata = ['商家数量', '人均消费'];
 		var series = [];
		$.ajax({
			url:"/market/market_echarts_2_v",
			type:"get",
			dataType:"json",
			async:false,
			success:function f(data) {
				console.log(data)
				vdata = data
			},
			error:function (errormsg) {
				alert(data)
			}
		})
		$.ajax({
			url:"/market/market_echarts_2_x",
			type:"get",
			dataType:"json",
			async:false,
			success:function f(data) {
				console.log(data)
				xdata = data
			},
			error:function (errormsg) {
				alert(data)
			}
		})
 		$.each(vdata, function (index, val) {
 			var series_option = {
 				name: ydata[index],
				yAxisIndex:index,
 				type: 'bar',
 				itemStyle: {
 					normal: {color: ''}
 				},
 				barWidth: '30',
 				data: val
 			};
 			series.push(series_option);
 		})
 		option = {
 			legend: {
 				data: ydata,
 				type: 'scroll',
				 textStyle: {color: "#fff"},
 				top: '0'
 			},
 			tooltip: {
 				trigger: 'axis',
 				axisPointer: {
 					type: 'shadow'
 				}
 			},
			"color": ["#62c98d",  "#2f89cf"], 
 			grid: {
 				top: '14%',
 				left: '15',
 				right: '35',
 				bottom: '12%',
 				containLabel: true
 			},
			
 			xAxis: [{
 				type: 'category',
				axisLabel:  {textStyle: {color: "rgba(255,255,255,.6)",}},
				axisLine: {lineStyle: { color: 'rgba(255,255,255,.1)'}},
				data: xdata,
 				}],
 			yAxis: [{
 				name: '商家数量',
 				type: 'value',
				axisTick: {show: false},
					splitLine: {
 					show: true,
 					lineStyle: {
 						color: "#62c98d"
 					}
 				}, //x轴线
 				axisLabel: {textStyle: {color: 'rgba(255,255,255,.6)'}},
				axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},
 			},
				{
					name: '人均消费',
					type: 'value',
					axisTick: {show: false},
					splitLine: {
						show: true,
						lineStyle: {
							color: "#2f89cf"
						}
					}, //x轴线
					axisLabel: {textStyle: {color: 'rgba(255,255,255,.6)'}},
					axisLine: {lineStyle: {color: 'rgba(255,255,255,.1)'}},
				},],
 			"dataZoom": [{
 				"show": true,
 				"height": 12,
 				"xAxisIndex": [
 					0
 				],
 				bottom: 5,
 				"start": 60,
 				"end": 80,
 				handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
 				handleSize: '110%',
 				handleStyle: {
 					color: "#d3dee5",
 				},

 				textStyle: {
 					color: "#fff"
 				},
 				borderColor: "rgba(255,255,255,.3)"

 			}],
 			series: series
 		};
 		// 使用刚指定的配置项和数据显示图表。
 		myChart.setOption(option);
 		window.addEventListener("resize", function () {
 			myChart.resize();
 		});
 	}
	 function echarts_3() {
		 var myChart = echarts.init(document.getElementById('echart3'));
		 var vdata=[];
		 $.ajax({
			 url:"/market/market_echarts_3",
			 type:"get",
			 dataType:"json",
			 async:false,
			 success:function f(data) {
				 console.log(data)
				 vdata = data
			 },
			 error:function (errormsg) {
				 alert(errormsg)
			 }
		 })
		 myChart.showLoading();
		 $.get('/js/chengdu.json', function (geoJson) {
			 myChart.hideLoading();
			 echarts.registerMap('成都', geoJson);
			 myChart.setOption(option = {
				 tooltip: {
					 trigger: 'item',
					 formatter: '{b}<br/>{c} 家'
				 },
				 visualMap: {
					 left: '10%',
					 top:'60%',
					 min: 500,
					 max: 800,
					 inRange: {
						 color: ['#313695', '#4575b4', '#74add1', '#abd9e9', '#e0f3f8', '#ffffbf', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
					 },
					 text: ['High', 'Low'],           // 文本，默认为数值文本
					 calculable: true
				 },
				 series: [{
					 name: '',
					 type: 'map',
					 mapType:'成都',
					 roam: true,
					 label: {
						 show: true
					 },
					 data: vdata,
				 }]
			 });
		 });

	 }
 })
